<template>
  <div id="app">
    <!-- <a-input placeholder="请输入任务" class="my_ipt" v-model.trim="inputValue" @keyup.native.enter="Submit()"/>
    <a-button type="primary" @click="Submit()" >添加事项</a-button>

    <a-list bordered :dataSource="listFilters" class="dt_list" >
      <a-list-item slot="renderItem" slot-scope="item, index">

        <a-checkbox :checked="item.done" @change="onChange(item)">{{item.info}}</a-checkbox>

        <a @click="Delete(index)" slot="actions">删除</a>
      </a-list-item>

      <div slot="footer" class="footer">

        <span>{{listFilters.length}}条数据</span>

        <a-radio-group default-value="a" button-style="solid"  v-model="type">
          <a-radio-button value="a">全部</a-radio-button>
          <a-radio-button value="b">未完成</a-radio-button>
          <a-radio-button value="c">已完成</a-radio-button>
        </a-radio-group>

        <a @click="allDelete()">清除已完成</a>
      </div>
    </a-list> -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      type: 'a',
      inputValue: '',
      list: JSON.parse(localStorage.getItem('listVal')) || [
        { id: 0, info: 'Racing car sprays burning fuel into crowd.', done: false },
        { id: 1, info: 'Japanese princess to wed commoner.', done: false },
        { id: 2, info: 'Australian walks 100km after outback crash.', done: false },
        { id: 3, info: 'Man charged over missing wedding girl.', done: false },
        { id: 4, info: 'Los Angeles battles huge wildfires.', done: false }
      ]

      // [
      //   { id: 0,info: 'Racing car sprays burning fuel into crowd.',done: false},
      //   { id: 1, info: 'Japanese princess to wed commoner.', done: false },
      //   { id: 2,info: 'Australian walks 100km after outback crash.',done: false},
      //   { id: 3, info: 'Man charged over missing wedding girl.', done: false },
      //   { id: 4, info: 'Los Angeles battles huge wildfires.', done: false }
      // ]
    }
  },
  filters: {

  },
  methods: {
    Submit () { // 添加
      if (this.inputValue === '') {
        return this.$error({
          title: '错误',
          content: '内容不能为空',
          maskClosable: true,
          centered: true
        })
      }
      this.list.unshift({
        id: 0,
        info: this.inputValue,
        done: false
      })
      this.initID()
      this.inputValue = ''
    },
    Delete (idx) { // 删除
      this.list.splice(idx, 1)
      this.initID()
    },
    onChange (item) { // 修改完成状态
      item.done = !item.done
    },
    allDelete () { // 全部删除
      this.list = this.list.filter(itm => itm.done === false)
    },
    initID () { // 重置ID
      this.list.forEach((item, index) => { item.id = index })
    }

  },
  watch: {
    list: {
      handler (val, oldVal) {
        console.log('写入缓存了')
        localStorage.setItem('listVal', JSON.stringify(val))
      },
      deep: true
    }
  },
  mounted () {

  },
  computed: {
    surplus () {
      return this.list.filter(item => !item.done).length
    },
    listFilters () { // 筛选显示信息
      if (this.type === 'a') {
        return this.list
      } else if (this.type === 'b') {
        return this.list.filter(item => item.done === false)
      } else if (this.type === 'c') {
        return this.list.filter(item => item.done === true)
      } else {
        throw new Error('属性值错误')
      }
    }
  }
}
</script>

<style scoped>
#app {
  padding: 10px;
}

.my_ipt {
  width: 500px;
  margin-right: 10px;
}

.dt_list {
  width: 500px;
  margin-top: 10px;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
